<template>
  <div class="video-gallery">
    <!-- 使用 Element UI 的菜单组件 -->
    <el-menu
      :default-active="activeCategory"
      mode="horizontal"
      @select="handleSelect"
      class="category-menu"
    >
      <el-menu-item
        v-for="(category, index) in categories"
        :key="index"
        :index="category.name"
      >
        {{ category.name }}
      </el-menu-item>
    </el-menu>

    <!-- 视频展示区域 -->
    <div class="video-container">
      <el-card v-if="selectedCategory" class="gallery-card" shadow="never">
        <el-row :gutter="20">
          <el-col
            v-for="(video, videoIndex) in selectedCategory.videos"
            :key="videoIndex"
            :xs="24" :sm="12" :md="8" :lg="8"
          >
            <el-card class="video-card" :body-style="{ padding: '0px' }" shadow="hover">
              <video
                :src="video.url"
                class="video"
                controls
              ></video>
              <div class="video-info">
                <span>{{ video.title }}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
      <el-empty v-else description="请选择一个分类" class="empty-state"></el-empty>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        {
          name: "自然",
          videos: [
            { url: "https://lf6-effectcdn-tos.byteeffecttos.com/obj/ies.fe.effect/73a925431aac3cf511e0fb73158c9be8.mp4", title: "自然视频1" },
            { url: "https://example.com/nature2.mp4", title: "自然视频2" },
            { url: "https://example.com/nature3.mp4", title: "自然视频3" },
            { url: "https://example.com/nature4.mp4", title: "自然视频4" },
            { url: "https://example.com/nature5.mp4", title: "自然视频5" },
            { url: "https://example.com/nature6.mp4", title: "自然视频6" },
          ],
        },
        {
          name: "城市",
          videos: [
            { url: "https://example.com/city1.mp4", title: "城市视频1" },
            { url: "https://example.com/city2.mp4", title: "城市视频2" },
            { url: "https://example.com/city3.mp4", title: "城市视频3" },
          ],
        },
        {
          name: "动物",
          videos: [
            { url: "https://example.com/animal1.mp4", title: "动物视频1" },
            { url: "https://example.com/animal2.mp4", title: "动物视频2" },
            { url: "https://example.com/animal3.mp4", title: "动物视频3" },
          ],
        },
      ],
      activeCategory: "自然",
      selectedCategory: null,
    };
  },
  methods: {
    handleSelect(index) {
      this.activeCategory = index;
      this.selectedCategory = this.categories.find((cat) => cat.name === index);
    },
  },
  mounted() {
    this.selectedCategory = this.categories.find(
      (cat) => cat.name === this.activeCategory
    );
  },
};
</script>

<style scoped>
.video-gallery {
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
}

.category-menu {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.video-container {
  margin-top: 20px;
}

.gallery-card {
  border: none;
}

.video-card {
  margin-bottom: 20px;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  background-color: #000;
}

.video-info {
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: #444;
  background: #fff;
  border-top: 1px solid #f0f0f0;
}

.empty-state {
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #eee;
  border-radius: 8px;
}
</style>
